import React from 'react';
import { observer } from 'mobx-react';
import { WeaTools,WeaErrorPage,WeaLeftTree,WeaLocaleProvider } from 'ecCom';
import { Row,Col,Dropdown,Menu,Icon } from 'antd';
import * as mobx from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

@observer
class LeftTree extends React.Component{
    componentDidMount(){
        window.setTimeout(function(){
            jQuery(".wf-query-tree").height(jQuery(".wf-query-left").height() - jQuery(".wf-query-tree-type").height());
        },100);
    }
    render(){
        const { queryStore } = this.props;
        const { belongPathTree,showTreeSwitch,treeProps } = queryStore;
        const { option,pathTree,kindTree,selectedKey} = treeProps;
        const treeDatas = belongPathTree ? pathTree : kindTree;
        let menuItems = [];
        let typeName = "";
        option && option.map(v =>{
            if((belongPathTree && v.key === "path") || (!belongPathTree && v.key === "kind"))
                typeName = v.name;
            menuItems.push(<Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@mxz5ej@${v.key}`} key={v.key}><span>{v.name}</span></Menu.Item>);
        });
        return (
            <div className="wf-query-left" style={{height:"100%"}}>
                {
                    showTreeSwitch &&
                        <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@qa5ak1`} overlay={<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@dmn9g0`} onClick={(item) => {this.switchTreeType(item.key)}}>{menuItems}</Menu>} trigger={['click']}>
                            <div className="wf-query-tree-type">
                                <i className="icon-toolbar-Organization-list" />
                                <span>{typeName}</span>
                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@we4k3x`} type="down" />
                            </div>
                        </Dropdown>
                }
                <div className="wf-query-tree">
                    <WeaLeftTree ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftTree@ygmh66`} 
                        ref="queryTree"
                        datas={mobx.toJS(treeDatas)}
                        selectedKeys={[selectedKey]}
                        onSearchLabelClick={this.onSearchLabelClick}
                        onSelect={this.onSelect}
                    />
                </div>
            </div>
        )
    }
    onSearchLabelClick = ()=> {this.props.queryStore.showAllTreeNode()};
    onSelect = (key)=> {this.props.queryStore.setSelectedTreeKey(key)};
   
    switchTreeType = (key) => {
        this.refs.queryTree.onSearchChange("");
        this.props.queryStore.switchTreeType(key);
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@9im0ln`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(LeftTree);